<!DOCTYPE html>
<html>

<head>
	<title>Vue , Hello World.</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="http://space.cdn.ports-intl.com/Ports/Ports-intl/common/Lib/h5style/css/import-min.css">
	<!-- 1.7.1/1.11.1/2.1.1 -->
	<script type="text/javascript" src="Lib/jquery-1.7.1.min.js"></script>
	<script src="Lib/vue.js"></script>
</head>


<body>
	<div id="app">
		
		<todo :Header='currentView' :items="items"></todo>
		
	</div>
	<script type="text/template" id="tpl">
		<div>
			<h3>{{h3}}</h3>
			<div>{{message}}</div>
			<div>
				<ul>
					<li v-for="item in items">{{item.name}}</li>
				</ul>
			</div>
		</div>
	</script>
	<script type="text/template" id="tpl2">
		<div>
			<div>{{Header}}</div>
			<div>
				<ul>
					<li v-for="item in items">{{item.name}}</li>
				</ul>
			</div>
		</div>
	</script>
</body>
<script type="text/javascript">
var datas = [{ "name": "aa1476459565", "age": 25, "mobile": "1366575177" }];


Vue.component('todo', {
	// props: ['items','txt1'],
	// template: '#tpl2'
	// template: '<div><li v-for="item in items">{{item.name}}</li></div>'
  	props: ['items','Header'],
  	template: '#tpl2'
});

new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue.js!',
		items: datas ,
		currentView: "listVM1"
	},
	methods:{
		reverseMessage: function(){
			$.ajax({
				type: "POST",
				url: "response.json",
				headers: {},
				data: "",
				dataType: "json",// html/json/jsonp/xml
				success: function(msg){
					// console.log(msg);
					// console.log(msg);
					datas.push.apply(datas,msg.data);
					// this.items.push(msg.data);
					// this.message = 'sss';
					// for(x in msg.data){
					// 	console.log(msg.data[x].name);
					// }
					console.log(datas);
				},
				error: function(){
					
				}
			});
		}
	}//,
	// components:{
	// 	'listVM1': listVM
	// }
});


</script>

</html>
